<template>
    <div class="file">
        <div class="body">
            <div class="title">上传文件</div>
            <div class="content">
               <!--  <form methods="post" enctype="multipart/form-data" action="/api/excelVoters"> -->
                    <input type="file" class="ipt" name="file" ref="fileInt">
                    <!-- <input type="text" :value="this.userId" name="mid" style="display: none"> -->
                    <div>
                    <input type="button" class="button" value="提交" @click="handleSubmitClick">
                    <input type="button" class="button button1" value="取消" @click="handleCancleClick">
                    </div>
                 <!-- </form> -->
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'Vuex'
export default {
  name: 'CandidateFile',
  computed: {
    ...mapState(['userId'])
  },
  methods: {
    handleCancleClick () {
      this.$emit('cancle')
    },
    handleSubmitClick () {
      const file = this.$refs.fileInt.files[0]
      // console.log(file)
      if (!file) {
        swal('文件为空', '', 'error')
      } else {
        const data = new FormData()
        data.append('file', file)
        data.append('mid', this.userId)
        axios.post('http://192.168.43.188:8081/excelCandidates', data, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(({data, status}) => {
          // console.log(data)
          if (status === 200) {
            // console.log(data)
            this.$emit('afterFile')
            if (data.msg.length === 1) {
              swal('Info', data.msg)
            } else {
              data.msg.forEach((item, index) => {
                const inde = index + 1
                if (item == '000') {//eslint-disable-line
                  data.msg.splice(index, 1, '   第' + inde + '字段格式或者数量不正确   ')
                } else if (item == '001') {//eslint-disable-line
                  data.msg.splice(index, 1, '   第' + inde + '个用户名已存在   ')
                } else if (item == '010') {//eslint-disable-line
                  data.msg.splice(index, 1, '   第' + inde + '个用户名的密码格式不正确   ')
                } else if (item == '100') {//eslint-disable-line
                  data.msg.splice(index, 1, '   第' + inde + '个用户名的姓名格式不正确   ')
                } else if (item == '111') {//eslint-disable-line
                  data.msg.splice(index, 1, '  成功添加用户  ')
                }
              })
              swal('Info', data.msg)
            }
          } else {
            swal('服务器错误', '', 'error')
          }
        }).catch((error) => {
          swal('Info' + error, '', 'error')
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~style/variable.styl'
.file
    z-index: 2
    position: absolute
    top: 0
    left: 0
    bottom: 0
    right: 0
    background: rgba(0, 0, 0, 0.4)
    .body
        margin: auto
        width: 50%
        background: #fff
        margin-top: 1.5rem
        .title
            line-height: 1rem
            background: $bgcolor
            text-align: center
            font-size: .32rem
            font-weight: 500
            color: #fff
        .content
             padding: .2rem .3rem
             text-align: center
             overflow: hidden
        .ipt
            font-size: .32rem
            line-height: .6rem
            font-weight: 700
            text-align: center
         .button
            background: $bgcolor
            color: #fff
            padding: 0  .2rem
            font-size: .36rem
            margin: .3rem .3rem 0 .3rem
            line-height: .7rem
            float: right
            font-weight: 700
            border-radius: .1rem
            border: .02rem solid $bgcolor
            cursor: pointer
        .button1
            background: #fff
            color: #666
            border: .02rem solid #666
</style>
